<template>
  <md-main class="md-pages-system-cloud-config">
    <div class="md-body">
      <el-tabs v-model="current" stretch @tab-click="handleTabsClick">
        <template v-for="item in dictData['sys_cloud_platform']">
          <el-tab-pane :label="item.dictLabel" :name="item.dictValue" :key="item.dictValue" />
        </template>
      </el-tabs>

      <template v-if="current==='1'">
        <el-form :model="qiNiuYunRequest" ref="qiNiuYunForm" size="small">
          <el-form-item label="accessKey" prop="accessKey">
            <el-input v-model="qiNiuYunRequest.accessKey" placeholder="请填写accessKey" />
          </el-form-item>
          <el-form-item label="secretKey" prop="secretKey">
            <el-input v-model="qiNiuYunRequest.secretKey" placeholder="请填写secretKey" />
          </el-form-item>
          <el-form-item label="桶名称" prop="bucketName">
            <el-input v-model="qiNiuYunRequest.bucketName" placeholder="请填写桶名称" />
          </el-form-item>
          <el-form-item label="自有域名" prop="domain">
            <el-input v-model="qiNiuYunRequest.domain" placeholder="请填写自有域名" />
          </el-form-item>
          <el-form-item label="桶域名" prop="buckerDomain">
            <el-input v-model="qiNiuYunRequest.buckerDomain" placeholder="请填写桶域名" />
          </el-form-item>
          <el-form-item label="路径前缀" prop="path">
            <el-input v-model="qiNiuYunRequest.path" placeholder="请填写路径前缀" />
          </el-form-item>
        </el-form>
      </template>
      <template v-if="current==='2'">
        <el-form :model="aliYunRequest" ref="aliYunForm" size="small">
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model="aliYunRequest.accessKeyId" placeholder="请填写accessKeyId" />
          </el-form-item>
          <el-form-item label="accessSecret" prop="accessSecret">
            <el-input v-model="aliYunRequest.accessSecret" placeholder="请填写accessSecret" />
          </el-form-item>
          <el-form-item label="桶名称" prop="bucketName">
            <el-input v-model="aliYunRequest.bucketName" placeholder="请填写桶名称" />
          </el-form-item>
          <el-form-item label="地域" prop="region">
            <el-input v-model="aliYunRequest.region" placeholder="请填写地域" />
          </el-form-item>
          <el-form-item label="地域节点" prop="endpoint">
            <el-input v-model="aliYunRequest.endpoint" placeholder="请填写地域节点" />
          </el-form-item>
          <el-form-item label="自有域名" prop="domain">
            <el-input v-model="aliYunRequest.domain" placeholder="请填写自有域名" />
          </el-form-item>
          <el-form-item label="桶域名" prop="buckerDomain">
            <el-input v-model="aliYunRequest.buckerDomain" placeholder="请填写桶域名" />
          </el-form-item>
          <el-form-item label="路径前缀" prop="path">
            <el-input v-model="aliYunRequest.path" placeholder="请填写路径前缀" />
          </el-form-item>
        </el-form>
      </template>
      <template v-if="current==='3'">
        <el-form :model="tengXunYunRequest" ref="tengXunYunForm" size="small">
          <el-form-item label="appId" prop="appId">
            <el-input v-model="tengXunYunRequest.appId" placeholder="请填写appId" />
          </el-form-item>
          <el-form-item label="secretId" prop="secretId">
            <el-input v-model="tengXunYunRequest.secretId" placeholder="请填写secretId" />
          </el-form-item>
          <el-form-item label="secretKey" prop="secretKey">
            <el-input v-model="tengXunYunRequest.secretKey" placeholder="请填写secretKey" />
          </el-form-item>
          <el-form-item label="桶名称" prop="bucketName">
            <el-input v-model="tengXunYunRequest.bucketName" placeholder="请填写桶名称" />
          </el-form-item>
          <el-form-item label="地域" prop="region">
            <el-input v-model="tengXunYunRequest.region" placeholder="请填写地域" />
          </el-form-item>
          <el-form-item label="默认域名" prop="endpoint">
            <el-input v-model="tengXunYunRequest.endpoint" placeholder="请填写默认域名" />
          </el-form-item>
          <el-form-item label="自有域名" prop="domain">
            <el-input v-model="tengXunYunRequest.domain" placeholder="请填写自有域名" />
          </el-form-item>
          <el-form-item label="路径前缀" prop="path">
            <el-input v-model="tengXunYunRequest.path" placeholder="请填写路径前缀" />
          </el-form-item>
        </el-form>
      </template>
      <template v-if="current==='4'">
        <el-form :model="huaWeiYunRequest" ref="huaWeiYunForm" size="small">
          <el-form-item label="accessKeyId" prop="accessKeyId">
            <el-input v-model="huaWeiYunRequest.accessKeyId" placeholder="请填写accessKeyId" />
          </el-form-item>
          <el-form-item label="secretAccessKey" prop="secretAccessKey">
            <el-input v-model="huaWeiYunRequest.secretAccessKey" placeholder="请填写secretAccessKey" />
          </el-form-item>
          <el-form-item label="桶名称" prop="bucketName">
            <el-input v-model="huaWeiYunRequest.bucketName" placeholder="请填写桶名称" />
          </el-form-item>
          <el-form-item label="地域节点" prop="endpoint">
            <el-input v-model="huaWeiYunRequest.endpoint" placeholder="请填写默认域名" />
          </el-form-item>
          <el-form-item label="自有域名" prop="domain">
            <el-input v-model="huaWeiYunRequest.domain" placeholder="请填写自有域名" />
          </el-form-item>
          <el-form-item label="桶域名" prop="buckerDomain">
            <el-input v-model="huaWeiYunRequest.buckerDomain" placeholder="请填写桶域名" />
          </el-form-item>
          <el-form-item label="路径前缀" prop="path">
            <el-input v-model="huaWeiYunRequest.path" placeholder="请填写路径前缀" />
          </el-form-item>
        </el-form>
      </template>
      <template v-if="current==='5'"></template>
    </div>

    <div class="footer">
      <md-button type="primary" size="small" :prems="['system:cloud:config:save']" @click="handleSubmit()">保存</md-button>
    </div>
  </md-main>
</template>

<script>
import { insertConfig, updateConfig, listConfig } from '@/api/system/config.service.js'
import { mdGetDictData } from '@/ddd/dict.service.js'
export default {
  name: 'MdCloudConfigComponent',
  data () {
    return {
      current: '1',
      qiNiuYunRequest: { ...qiNiuYunRequest },
      aliYunRequest: { ...aliYunRequest },
      tengXunYunRequest: { ...tengXunYunRequest },
      huaWeiYunRequest: { ...huaWeiYunRequest },
      benDiRequest: { ...benDiRequest },
      request: { ...requestParams },
      configList: [],
      dictData: {}
    }
  },
  mounted () {
    mdGetDictData(['sys_cloud_platform']).then(res => {
      this.dictData = res
      this.current = this.dictData['sys_cloud_platform'].find(e => e.isDefault === 'Y').dictValue
    })

    this.getConfigData()
  },
  methods: {
    async getConfigData () {
      this.configList = []

      try {
        const res = await listConfig({
          configType: 'C',
          orderBy: 'create_time',
          isDesc: true
        })

        if (res.data && res.data.length > 0) {
          this.configList = res.data

          this.qiNiuYunRequest = { ...qiNiuYunRequest }
          const qiNiu = this.configList.find(e => e.configKey === 'sys_qi_niu_yun_cloud_config')
          if (qiNiu && qiNiu.configValue) {
            this.qiNiuYunRequest = JSON.parse(qiNiu.configValue)
          }

          this.aliYunRequest = { ...aliYunRequest }
          const aLi = this.configList.find(e => e.configKey === 'sys_ali_yun_cloud_config')
          if (aLi && aLi.configValue) {
            this.aliYunRequest = JSON.parse(aLi.configValue)
          }

          this.tengXunYunRequest = { ...tengXunYunRequest }
          const tengXun = this.configList.find(e => e.configKey === 'sys_teng_xun_yun_cloud_config')
          if (tengXun && tengXun.configValue) {
            this.tengXunYunRequest = JSON.parse(tengXun.configValue)
          }

          this.huaWeiYunRequest = { ...huaWeiYunRequest }
          const huaWei = this.configList.find(e => e.configKey === 'sys_hua_wei_yun_cloud_config')
          if (huaWei && huaWei.configValue) {
            this.huaWeiYunRequest = JSON.parse(huaWei.configValue)
          }
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleTabsClick () {
      if (this.current === '1') {
        this.qiNiuYunRequest = { ...qiNiuYunRequest }
        const qiNiu = this.configList.find(e => e.configKey === 'sys_qi_niu_yun_cloud_config')
        if (qiNiu && qiNiu.configValue) {
          this.qiNiuYunRequest = JSON.parse(qiNiu.configValue)
        }
      }

      if (this.current === '2') {
        this.aliYunRequest = { ...aliYunRequest }
        const aLi = this.configList.find(e => e.configKey === 'sys_ali_yun_cloud_config')
        if (aLi && aLi.configValue) {
          this.aliYunRequest = JSON.parse(aLi.configValue)
        }
      }

      if (this.current === '3') {
        this.tengXunYunRequest = { ...tengXunYunRequest }
        const tengXun = this.configList.find(e => e.configKey === 'sys_teng_xun_yun_cloud_config')
        if (tengXun && tengXun.configValue) {
          this.tengXunYunRequest = JSON.parse(tengXun.configValue)
        }
      }

      if (this.current === '4') {
        this.huaWeiYunRequest = { ...huaWeiYunRequest }
        const huaWei = this.configList.find(e => e.configKey = 'sys_hua_wei_yun_cloud_config')
        if (huaWei && huaWei.configValue) {
          this.huaWeiYunRequest = JSON.parse(huaWei.configValue)
        }
      }
    },
    async handleSubmit () {
      try {
        const params = Object.assign({}, { ...this.request })

        if (this.current === '1') {
          const configValue = Object.assign({}, { ...this.qiNiuYunRequest })

          params.configName = '七牛云-云存储配置'
          params.configKey = configValue.configKey
          params.configValue = JSON.stringify(configValue)
          params.configType = 'C'
          params.remark = '应用于全局文件存储'
        }

        if (this.current === '2') {
          const configValue = Object.assign({}, { ...this.aliYunRequest })

          params.configName = '阿里云-云存储配置'
          params.configKey = configValue.configKey
          params.configValue = JSON.stringify(configValue)
          params.configType = 'C'
          params.remark = '应用于全局文件存储'
        }

        if (this.current === '3') {
          const configValue = Object.assign({}, { ...this.tengXunYunRequest })

          params.configName = '腾讯云-云存储配置'
          params.configKey = configValue.configKey
          params.configValue = JSON.stringify(configValue)
          params.configType = 'C'
          params.remark = '应用于全局文件存储'
        }

        if (this.current === '4') {
          const configValue = Object.assign({}, { ...this.huaWeiYunRequest })

          params.configName = '华为云-云存储配置'
          params.configKey = configValue.configKey
          params.configValue = JSON.stringify(configValue)
          params.configType = 'C'
          params.remark = '应用于全局文件存储'
        }

        const config = this.configList.find(e => e.configKey === params.configKey)

        if (config) {
          params.configId = config.configId
        }

        await (params.configId === undefined ? insertConfig : updateConfig)(params)

        this.$message.success('保存成功')

        this.getConfigData()
      } catch (error) {
        console.log(error)
      }
    }
  }
}

const requestParams = {
  configId: undefined,
  configName: undefined,
  configKey: undefined,
  configValue: undefined,
  configType: 'Y',
  remark: undefined
}

const qiNiuYunRequest = {
  configKey: 'sys_qi_niu_yun_cloud_config',
  accessKey: undefined, // accessKey
  secretKey: undefined, // secretKey
  bucketName: undefined, // 桶名称
  domain: undefined, // 自有域名
  buckerDomain: undefined, // 桶域名（七牛云默认域名）
  path: undefined // 前缀路径
}

const aliYunRequest = {
  configKey: 'sys_ali_yun_cloud_config',
  accessKeyId: undefined, // AccessKeyId
  accessSecret: undefined, // AccessSecret
  bucketName: undefined, // 桶名称
  region: undefined, // 地域
  endpoint: undefined, // 地域节点
  domain: undefined, // 自有域名
  buckerDomain: undefined, // 桶域名（阿里云默认域名）
  path: undefined // 前缀路径
}

const tengXunYunRequest = {
  configKey: 'sys_teng_xun_yun_cloud_config',
  secretId: undefined, // secretId
  secretKey: undefined, // secretKey
  appId: undefined, // appId
  bucketName: undefined, // 桶名称
  region: undefined, // 地域
  endpoint: undefined, // 地域节点（腾讯默认域名）
  domain: undefined, // 自有域名
  path: undefined // 前缀路径
}

const huaWeiYunRequest = {
  configKey: 'sys_hua_wei_yun_cloud_config',
  accessKeyId: undefined, // accessKeyId
  secretAccessKey: undefined, // secretAccessKey
  bucketName: undefined, // 桶名称
  endpoint: undefined, // 地域节点
  domain: undefined, // 自有域名
  buckerDomain: undefined, // 桶域名（阿里云默认域名）
  path: undefined // 前缀路径
}

const benDiRequest = {
  configKey: 'sys_local_cloud_config',
}
</script>

<style lang="less" scoped>
.md-pages-system-cloud-config {
  padding-bottom: 50px;
  ::v-deep .el-tabs {
    width: 500px;
    box-sizing: border-box;
    margin: 0px auto;
  }

  ::v-deep .el-form {
    width: 500px;
    box-sizing: border-box;
    margin: 0px auto;
    .el-form-item {
      margin-bottom: 8px !important;
    }
  }

  .footer {
    position: absolute;
    bottom: 0px;
    left: 0px;
    z-index: 10;
    width: 100%;
    background-color: #fff;
    text-align: center;
    padding: 10px 0px;
    border-top: 1px solid #ececec;
  }
}
@media (max-width: 768px) {
  .md-pages-system-cloud-config {
    ::v-deep .el-tabs {
      width: 100%;
    }

    ::v-deep .el-form {
      width: 100%;
    }
  }
}
</style>